import React, { Component, } from 'react';
import ScrollableTabView, { DefaultTabBar, } from 'react-native-scrollable-tab-view';
import connect from '../../app/store/connect';
import urls from '../../app/constants/urls';
import { StyleSheet, Text, View, TextInput, Button, Image, } from 'react-native';
import { saveToken, getUserId, } from '../../commons/utils/passport';
import { GET, POST, } from '../../commons/utils/request';
import BaseSelector from '../../app/selectors/base';
import * as BaseActions from '../../app/actions/base';
import { savePhone, } from '../../commons/utils/passport';
import Toast from '../../components/Toast';

@connect(BaseSelector,  BaseActions)
export default class Login extends Component {
  static navigationOptions = ({ navigation, }) => ({
    headerTitle: '登录',
  });
  constructor(props) {
    super(props);
    this.state = {
      phone: '',
      password: '',
    };
  }
  async doLogin(phone, password) {
    if (!phone || phone.length != 11) {
      Toast.show({ title: "请输入正确的手机号", });
      return;
    }
    if (!password || password.length < 8) {
      Toast.show({ title: "密码长度不正确", });
      return;
    }

    const param = {
      userName: phone,
      passwd: password,
    };
    await POST(urls.login, JSON.stringify(param)).then(async resp => {
      console.log('TAGGG', `doLogin====resp==${JSON.stringify(resp)}`);
      if (resp && resp.code == 0 && resp.data) {
        await saveToken(resp.data.token);
        if (resp.data.nextCheck && resp.data.nextCheck == 'bindEmail') {
          const userId = await getUserId();
          const param = {
            passwd: password,
            userId,
          };
          this.props.navigation.navigate('BindEmail', param);
        } else {
          const param = {
            token: resp.data.token,
            refresh: true,
          };
          await savePhone(phone)
          this.props.actions.login({isLogin: true})
          this.props.navigation.navigate('Home', param);
        }
      } else {
        Toast.show({ title: '登录异常, ' + resp.msg, });
      }
    });
  }

  render() {
    const uri = 'http://120.48.109.211:8088/static/icon/money.png';
    return (
      <View style={styles.container}>
        <View style={styles.topContent}>
          <Image resizeMode="contain" style={styles.logo} source={{ uri, }} />
          <Text style={styles.saiHi}>嗨, 欢迎回来</Text>
          <Text style={styles.saiHiDesc}>登录之后更精彩, 美好体验即将开始</Text>
        </View>
        <View style={styles.bottomContent}>
          <TextInput
            style={styles.phone}
            placeholder="请输入手机号"
            placeholderTextColor="#999999"
            keyboardType="number-pad"
            onChangeText={(phone) => this.setState({ phone, })}
          />
          <TextInput
            style={styles.verifyCode}
            placeholder="请输入密码"
            placeholderTextColor="#999999"
            keyboardType="number-pad"
            secureTextEntry
            onChangeText={(password) => this.setState({ password, })}
          />
          <Text
            style={styles.login}
            onPress={() => {
              this.doLogin(this.state.phone, this.state.password);
            }}
          >登陆</Text>
        </View>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#FFFFFF',
  },
  topContent: {
    backgroundColor: '#FFFFFF',
    paddingBottom: 30,
  },
  bottomContent: {
    alignItems: 'center',
  },
  phone: {
    width: 320,
    height: 40,
    marginTop: 40,
    borderColor: '#F0F0F0',
    borderWidth: 0.6,
    borderRadius: 4,
    paddingLeft: 10,
  },
  verifyCode: {
    width: 320,
    height: 40,
    marginTop: 20,
    borderColor: '#F0F0F0',
    borderWidth: 0.6,
    borderRadius: 4,
    paddingLeft: 10,
  },
  login: {
    width: 320,
    marginTop: 50,
    borderRadius: 5,
    color: '#FFFFFF',
    fontSize: 16,
    textAlign: 'center',
    textAlignVertical: 'center',
    backgroundColor: '#0091ff',
    paddingTop: 10,
    paddingBottom: 10,
  },
  logo: {
    width: 45,
    height: 45,
    marginLeft: 15,
    marginTop: 20,
  },
  saiHi: {
    fontSize: 24,
    color: '#212121',
    marginTop: 15,
    marginLeft: 15,
  },
  saiHiDesc: {
    fontSize: 15,
    color: '#999999',
    marginTop: 10,
    marginLeft: 15,
  },
});
